<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的订单" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="padding-left:20rpx;padding-right:20rpx;padding-bottom:20rpx;">
			<view class="shadow_con u-margin-top-20">
				<view class="u-border-bottom title">商品信息</view>
				<view>
					<view class="item" v-for="(item, index) in detail.item" :key="index">
						<view class="left"><image :src="item.goods_cover" mode="aspectFill"></image></view>
						<view class="content">
							<view class="title u-line-2">{{ item.goods_name }}聚合反应附加费几号发货</view>
							<view class="type">{{ item.goods_spec }}</view>
							<view class="delivery-time">更新时间 {{$u.timeFormat(item.update_time, 'yyyy年mm月dd日')}}</view>
						</view>
						<view class="right">
							<view class="price">
								￥{{ priceInt(item.total_selling) }}
								<text class="decimal">.{{ priceDecimal(item.total_selling) }}</text>
							</view>
							<view class="number">x{{ item.stock_sales }}</view>
						</view>
					</view>
					<view class="total">
						共{{ detail.number_goods}}件商品 合计:
						<text class="total-price">
							￥{{ detail.amount_goods }}.
							<text class="decimal">{{ priceDecimal(detail.amount_goods) }}</text>
						</text>
					</view>
					
				</view>
			</view>
			<view class="shadow_con u-margin-top-20" v-if="detail.truck_type == 1">
				<view class="u-border-bottom title u-flex u-row-between">
					<text>收货人信息</text>
					<text style="font-size: 26rpx; color:#0c838b;" >{{detail.status_label}}</text>
				</view>
				<view>称呼：{{userInfo.name }}</view>
				<view>电话：{{userInfo.phone}}</view>
				<view>地址：{{userInfo.address}}</view>
				<view>详细地址：{{userInfo.address_detail}}</view>
			</view>
			
			<view class="shadow_con u-margin-top-20" style="margin-bottom:20rpx;">
				<view class="u-border-bottom title">
					<text>订单信息</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between" v-if="detail.order_no">
					<text style="color:#666;">订单编号</text>
					<text>{{detail.order_no}}</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between">
					<text style="color:#666;">订单状态</text>
					<text v-if="detail.status==2">待支付</text>
					<text v-if="detail.status==4">待发货</text>
					<text v-if="detail.status==5">待收货</text>
					<text v-if="detail.status==6">已完成</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between">
					<text style="color:#666;">下单时间</text>
					<text>{{$u.timeFormat(detail.create_time, 'yyyy年mm月dd日')}}</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between" v-if="detail.payment_amount">
					<text style="color:#666;">支付金额</text>
					<text>{{detail.payment_amount}}</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between" v-if="detail.payment_remark">
					<text style="color:#666;">支付备注</text>
					<text>{{detail.payment_remark}}</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between" v-if="detail.payment_time">
					<text style="color:#666;">支付时间</text>
					<text>{{$u.timeFormat(detail.payment_time, 'yyyy年mm月dd日')}}</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between" v-if="detail.payment_trade">
					<text style="color:#666;">支付单号</text>
					<text>{{detail.payment_trade}}</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between">
					<text style="color:#666;">配送方式</text>
					<text v-if="detail.truck_type == 1">物业配送</text>
					<text v-else>自提</text>
				</view>
				<view class="u-border-bottom u-flex u-row-between" v-if="detail.order_remark">
					<text style="color:#666;">订单备注</text>
					<text>{{detail.order_remark}}</text>
				</view>
			</view>
			<button type="default" class="btn_con" v-if="detail.status==2" @click="tozhifu(detail.order_no)">去支付</button>
		</view>
	</view>
</template>

<script>
	import { getOrderDetail } from "@/service/shopservice.js";
	import { getAddress } from '@/service/userService.js';
	export default {
		data () {
			return {
				id:0,
				userInfo: {
					id:0,
					address: '请选择收货地址',
					address_detail: '',
					name: '收货人',
					phone: '联系电话'
				},
				aid:0,
				detail:{}
			}
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		onLoad(options) {
			this.id=options.id;
			getOrderDetail({oid:options.id}).then(res=>{
				if(res.code==200){
					this.detail=res.result;
					this.aid=res.result.aid;
					getAddress().then(this.getAddress);
				}
				
			})
			
		},
		methods:{
			getAddress(e) {
				var that=this;
				// console.log(e);
				if (e.code == 200) {
					for(var i=0;i<e.result.length;i++){
						if(e.result[i].id==that.aid){
							that.userInfo = e.result[i];
						}
					}
					
				}
			},
			tozhifu(orderno){
				this.$u.route({
					url: '/pagesShop/order/orderConfirm',
					params: {
						order_no: orderno
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.u-flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.u-row-between {
		justify-content: space-between;
	}
	.u-margin-top-20{
		margin-top:20rpx;
	}
	.va_m{
		vertical-align: middle;
	}
	.shadow_con{
		padding:20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 15rpx #ddd;
		background-color: #fff;
	}
	.title{
		font-size: 32rpx;
		font-weight: bold;
	}
	.shadow_con>view{
		padding:15rpx 0;
	}
	.shopimg{
		display: inline-block;
		width:27%;
	}
	.shopinfo{
		display: inline-block;
		width:68%;
		padding:15rpx;
	}
	.price{
		margin-top:20rpx;
		font-size: 28rpx;
		color:#666;
	}
	.btn_con{
		width:90%;
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		overflow: hidden;
		margin:70rpx auto 20rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff !important;
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			width:52%;
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
</style>